<template>
  <div class="main">
    <div class="head">
      <div class="head-content">
        <div
          :style="{
            background: '#99CCFF',
            backgroundSize: '50px 50px',
          }"
          class="head-circle"
        >
          <div>{{ form.LastWord }}</div>
        </div>
        <div class="u-name">{{ form.ChnName }}</div>
      </div>
      <div class="head-bottom"></div>
    </div>
    <div class="content">
      <van-form>
        <van-field
          class="input_text"
          label="部门"
          placeholder="无"
          readonly
          v-model="form.OrgName"
        />
        <van-field
          class="input_text"
          label="岗位"
          placeholder="无"
          readonly
          v-model="form.PostName"
        />
        <van-field
          class="input_text"
          label="手机"
          placeholder="无"
          readonly
          v-model="form.Mobile"
        />
        <van-field
          class="input_text"
          label="邮箱"
          placeholder="无"
          readonly
          v-model="form.Email"
        />
        <van-cell-group style="line-height: 60px">
          <van-field
            v-model="form.AccountCode"
            label="账号"
            placeholder="未开通"
            class="input_text"
            readonly
          >
            <van-button
              slot="button"
              type="primary"
              size="small"
              @click="getCancelAccount(form.IsAccounte)"
              v-if="!form.IsDefault && !form.IsAccounted"
              >开通</van-button
            >
            <van-button
              slot="button"
              type="danger"
              size="small"
              @click="getCancelAccount(form.IsAccounte)"
              v-if="!form.IsDefault && form.IsAccounted"
              >取消</van-button
            >
          </van-field>
        </van-cell-group>

        <van-cell-group style="line-height: 60px">
          <van-field v-model="IsUsing" label="状态" class="input_text" readonly placeholder="无">
            <van-button
              slot="button"
              type="danger"
              size="small"
              @click="getUse(form.Status)"
              v-if="!form.IsDefault && form.Status == 10"
              >禁用</van-button
            >
            <van-button
              slot="button"
              type="primary"
              size="small"
              @click="getUse(form.Status)"
              v-if="!form.IsDefault && form.Status != 10"
              >启用</van-button
            >
          </van-field>
        </van-cell-group>
        <van-field
          class="input_text"
          label="锁定"
          placeholder="无"
          readonly
          v-model="LockDesc"
        />
        <van-field class="input_text" label="" readonly />
      </van-form>
    </div>
    <div class="bottom">
      <div class="btn_submit">
        <van-button block type="primary" @click="edit()"> 编辑 </van-button>
      </div>
      <div class="btn-group2">
        <div style="flex: 1">
          <div style="margin-left: 0.53rem">
            <van-button
              size="normal"
              block
              type="info"
              @click="ResetPassword()"
            >
              重置密码
            </van-button>
          </div>
        </div>
        <div style="flex: 0.05"></div>
        <div style="flex: 1" v-if="!form.IsDefault">
          <div style="margin-right: 0.53rem">
            <van-button size="normal" block type="danger" @click="getDelete()">
              删除
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
//import eagleInput from "@/components/eagle-input/eagle-input.vue"
import {
  getUserDetail,
  getResetPassword,
  getDelete,
  getCancelAccount,
  StartUse,
  StopUse,
} from "@/api/userUser";
export default {
  components: {
    [Dialog.name]: Dialog,
    //eagleInput
  },
  data() {
    return {
      form: {
        ID: "0",
        UserName: "",
        ChnName: "",
        LastWord: "",
        OrgName: "",
        PostName: "",
        Mobile: "",
        Email: "",
        AccountCode: "",
        IsLocked: false,
        IsDefault: false,
        Status: -10,
      },
      IsUsing: "",
      LockDesc: "",
      border: false,
    };
  },
  created() {
    this.form.UserName = this.$route.query.userName;
    this.getDetail();
  },
  computed: {},
  methods: {
    getDetail() {
      let params = { userName: this.form.UserName };
      if (this.form.UserName) {
        getUserDetail(params).then((res) => {
          this.form = res.data;
          if (res.data) {
            this.IsUsing = this.form.Status == 10 ? "启用" : "禁用";
            this.LockDesc = this.form.IsLocked ? "是" : "否";
          }
        });
      }
    },
    edit() {
      this.$router.push({
        path: "/UserinfoAdd",
        query: { userName: this.form.UserName },
      });
    },
    ResetPassword() {
      let params = { userName: this.form.UserName };
      getResetPassword(params).then((res) => {
        this.getDetail();
      });
    },
    getDelete() {
      Dialog.confirm({
        title: "提示",
        message: "是否确定删除该员工账号吗?",
      }).then(() => {
        let params = { userName: this.form.UserName };
        getDelete(params).then((res) => {
          this.getDetail();
        });
      });
    },
    getCancelAccount(IsAccounte) {
      if (IsAccounte) {
        Dialog.confirm({
          title: "提示",
          message: "是否确定取消该账号?",
        }).then(() => {
          let params = { userName: this.form.UserName };
          getCancelAccount(params).then((res) => {
            this.getDetail();
          });
        });
      } else {
         this.$router.push({
        path: "/UserinfoGenerateAccount",
        query: { UserName: this.form.UserName, WorkCode: this.form.WorkCode, ChnName: this.form.ChnName, CompanyCode: this.form.CompanyCode },
      });
      }
    },
    getUse(str) {
      Dialog.confirm({
        title: "提示",
        message: str == -10 ? "是否启用该账号?" : "是否禁用该账号?",
      }).then(() => {
        let params = { userName: this.form.UserName };
        if (str == -10) {
          StartUse(params).then((res) => {
            this.getDetail();
          });
        } else {
          StopUse(params).then((res) => {
            this.getDetail();
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  .head {
    flex: 1.5;
    flex-direction: column;
    display: flex;
    .head-content {
      display: flex;
      flex-direction: column;
      background: #fff;
      /*实现垂直居中*/
      align-items: center;
      /*实现水平居中*/
      justify-content: center;
      flex: 9;
      .head-circle {
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;
        color: #fff;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        background-repeat: no-repeat;
        background: "#99CCFF";
      }
      .u-name {
        padding-top: 0.15rem;
      }
    }
    .head-bottom {
      flex: 1;
      background: #e8f1f8;
    }
  }
  .content {
    flex: 3;
    background: #fff;
  }
  .bottom {
    flex: 2;
  }
}
.btn-group2 {
  display: flex;
}
</style>
